<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#box1{
				width: 100px;
				height: 100px;
				background-color: pink;
				position: absolute;
				left: 0;
				
			}
			#box2{
				width: 0;
				height: 2000px;
				border-left: 1px black solid;
				position: absolute;
				top: 0;
				left: 800px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var btn01 = document.getElementById("btn01");
				
				var btn02 = document.getElementById("btn02");
				
				var box1 = document.getElementById("box1");
				
				
				
				btn01.onclick = function(){
					move(box1 , 800 , 10);
				};
				
				btn02.onclick = function(){
					move(box1 , 0 , 10);
				};
				
			
				var timer;
				
				
						
				function move(obj , target , speed){
					
					clearInterval(timer);
					
					var current = parseInt(getStyle(obj , "left"));
						
					if(current > target){
						speed = -speed;
					}
						
					timer = setInterval(function(){
						
						var oldValue = parseInt(getStyle(obj,"left"));
						
						var newStyle = oldValue + speed;
						
						if(newStyle < target && speed < 0 || newStyle > target && speed > 0){
							newStyle = target;
						}
						
						obj.style.left = newStyle + "px";
						
						if(newStyle ===target){
							clearInterval(timer);
						}
						
					},300);
				};
			};
			
			function getStyle(obj , name){
				if(window.getComputedStyle){
					return getComputedStyle(obj , null)[name];
				}else{
					return obj.currentStyle[name];
				}
			}
		</script>
	</head>
	<body>
		<button id="btn01">点击按钮，box1向右移动</button>
		<button id="btn02">点击按钮，box1向左移动</button>
		<br /><br />
		<div id="box1"></div>
		<div id="box2"></div>
	</body>
</html>
